import React, { useRef, useEffect, useMemo } from 'react';
import { connect } from 'dva';
import { Link, Route, Switch } from 'dva/router';
import { Radio, Card, Button, Tag } from 'antd';
import {
    ArrowUpOutlined,
    ArrowDownOutlined,
    DownloadOutlined,
} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import style from '@/pages/IndexPage.css';

let data = [];
for ( let i = 0 ; i < 30 ; i++){
    data.push({ date:i+1, value:200 + Math.round(Math.random() * 50), sameRatio:200 + Math.round(Math.random() * 50), adjoinRatio:200 + Math.round(Math.random() * 50) });
}
function BarChart({ title, data, dataType, energyInfo, theme }) {
    let textColor = 'rgba(0, 0, 0, 0.85)';
    let seriesData = [], categoryData = [], valueData=[], sameRatioData = [], adjoinRatioData = [];
    
    Object.keys(data).sort((a,b)=>{
        return a < b ? - 1 : 1;
    }).forEach(key=>{
        categoryData.push(key);
        valueData.push(data[key] ? data[key][dataType === 'energy' ? 'sumUsage' : 'cost'] : 0);
        sameRatioData.push(data[key] ? data[key][dataType === 'energy' ? 'usageYOY' : 'costYOY'] : 0);
        adjoinRatioData.push(data[key] ? data[key][dataType === 'energy' ? 'usageChain' : 'costchain'] : 0);
    })

    seriesData.push({
        type:'bar',
        barWidth:10,
        name: dataType === 'energy' ? '能耗' : '成本',
        itemStyle:{ color:'#165dff'},
        data:valueData
    });
    seriesData.push({
        type:'line',
        name:'同比',
        smooth:true,
        symbol:'none',
        showSymbol:true,
        itemStyle:{ color:'#9fdb1d'},
        data:sameRatioData
    });
    seriesData.push({
        type:'line',
        name:'环比',
        smooth:true,
        symbol:'none',
        showSymbol:true,
        itemStyle:{ color:'#fe7b00'},
        data:adjoinRatioData
    });
        

   
    return (
        <div style={{ height:'100%', position:'relative' }}>
            <ReactEcharts
                notMerge={true}
                style={{ height: '100%' }}
                option={{
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: 14,
                        },
                        left: 20,
                        top: 10,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer:{
                            type:'line',
                            label:{
                                backgroundColor:'#fff'
                            }
                        }
                    },
                    
                    grid:{
                        top:80,
                        left:20,
                        right:20,
                        bottom:20,
                        containLabel: true,
                    },
                    xAxis: {
                        type:'category',
                        axisTick:{ show:false },
                        axisLine:{ show:false },
                        data:categoryData 
                    },
                    yAxis: {
                        type: 'value',
                        name: dataType === 'energy' ? energyInfo.unit || '' : '元',
                        splitArea: {
                            show: false,
                        },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#f0f0f0',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(0, 0, 0, 0.65)',
                        }
                    },
                    
                    series:seriesData
                }}
            />
        </div>
    );
}

export default React.memo(BarChart);
